import React, { useEffect, useRef, useState } from "react";
import axios from "axios";
import ShoppItem from "../../components/shoppItem";
import { useNavigate } from "react-router-dom";
import { Swiper, Search, List } from "react-vant";
import "./style.css";
import { useSelector } from "react-redux";
const Index = () => {
  const navigate = useNavigate();
  // 获取浏览记录
  const userBrowerList = useSelector((state) => state.user.userBrowerList);
  // 列表数据
  const [list, setList] = useState([]);
  // 购物车数据
  const [bannerList, setBannerList] = useState([]);
  // 页码
  const [pageCode, setPageCode] = useState(1);
  // 完成状态
  const [finished, setfinished] = useState(false);
  // ref
  const swiperRef = useRef();
  // 获取列表数据
  const fetchList = async () => {
    const resp = await axios.get("/api/list", { params: { pageCode } });
    const { code, data, message } = resp.data;
    if (code === 200) {
      setList([...list, ...resp.data.data]);
    } else {
      // 关掉onload
      setfinished(true);
    }
  };
  // 获取轮博数据
  const fetchBannerList = async () => {
    const resp = await axios.get("/api/banner");
    setBannerList(resp.data.data);
  };
  // 是否置灰
  const getIsActive = (v) => {
    return userBrowerList.some((item) => item.baseSpuId === v.baseSpuId);
  };
  useEffect(() => {
    fetchBannerList();
  }, []);
  return (
    <div className="home">
      {/* 头部组件 */}
      <Search placeholder="请搜素内容" onFocus={() => navigate('/search')}></Search>
      {/* 轮播模块 */}
      {bannerList.length !== 0 && (
        <Swiper
          ref={swiperRef}
          className="banner"
          indicator={(total, current) => {
            return (
              <div className="rv-swiper__indicator">
                <div className="rv-indicator">
                  {bannerList.map((v, i) => {
                    return (
                      <div
                        onClick={() => swiperRef.current.swipeTo(i)}
                        className={
                          "rv-indicator__dot " +
                          (i === current ? "rv-indicator__dot--active" : "")
                        }
                        key={i}
                      ></div>
                    );
                  })}
                </div>
              </div>
            );
          }}
        >
          {bannerList.map((v, i) => {
            return (
              <Swiper.Item key={i}>
                <img src={v} alt="" />
              </Swiper.Item>
            );
          })}
        </Swiper>
      )}
      {/* 列表模块 */}
      <List
        finished={finished}
        finishedText="没有更多数据了"
        onLoad={() => {
          setPageCode(pageCode + 1);
          fetchList();
        }}
      >
        <div className="list">
          {list.map(({ product }, i) => {
            return (
              <ShoppItem
                key={i}
                product={product}
                onClick={() =>
                  navigate("/detail/" + product.baseSpuId, {
                    state: product,
                  })
                }
                isActive={getIsActive(product)}
              ></ShoppItem>
            );
          })}
        </div>
      </List>
    </div>
  );
};

export default Index




const fetchList =  () => {
  return dispatch => {
    const resp = await axios.get("/api/list", { params: { pageCode } });
    const { code, data, message } = resp.data;
    if (code === 200) {
      dispatch({ type: 'setList', payload:  resp.data.data})
    } else {
      // 关掉onload
      setfinished(true);
    }
    }
    
};


const fn = ({ getState, dispatch }) => next => action  => {
  if(typeof action === 'function') {
    action(...)
  }


  next(action)
} 

const fn = (...func) => {


  return func.reduce((a, b) =>(...args) =>  a(b(...args)))
} 